<template>
  <el-container>
    <el-main>
      <el-form :model="spaceForm" ref="spaceForm" :label-position="labelPosition" label-width="80px">
        <el-row class="headSearch">条件检索</el-row>
        <el-row class="rr">
          <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
            <el-form-item prop="berthNo" label-width="0">
              <el-input prefix-icon="el-icon-search" v-model="spaceForm.berthNo" type="text" placeholder="泊位编号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin:10px 24px 0">
            <el-button class="btnSearch1" type="primary" @click="submitForm()">搜索</el-button>
          </el-col>
        </el-row>
        <collapse-vertical>
          <el-row class="rr" v-show="item3Seem">
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="parkName" label="所在停车场">
                  <el-input v-model="spaceForm.parkName" @click.native="openPark" type="text" placeholder="所在停车场"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="roadname" label="所在路段">
                  <el-input v-model="spaceForm.roadname" @click.native="openRoad" type="text" placeholder="所在路段"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="roadNum" label="路段内编号">
                  <el-input v-model="spaceForm.roadNum" type="text" placeholder="路段内编号"/>
                </el-form-item>
              </el-col>
            </el-row>

          <el-row>
            <el-form-item prop="berthType" label="泊位类型">
              <el-radio-group v-model="spaceForm.berthType">
                <el-radio v-for="item in numType" :label="item.id">{{item.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="berthStatus" label="泊位状态">
              <el-radio-group v-model="spaceForm.berthStatus">
                <el-radio v-for="item in numStatus" :label="item.id">{{item.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <el-form-item prop="berthStatus" label="是否示范路">
                <el-radio-group v-model="spaceForm.isDemo">
                  <el-radio v-for="item in demoRoad" :label="item.id">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="hidBtn">
              <el-button @click="submitForm()" size="mini">提交</el-button>
              <el-button @click="resetForm('personForm')" size="mini">重置</el-button>
            </el-col>
          </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <!--<el-button  icon="el-icon-arrow-down" @click="item3Seem = !item3Seem" type="text"></el-button>-->
          <!-- <el-button  icon="el-icon-arrow-up" @click="closeHidden" type="text"></el-button>-->
          <el-button style="border: none;background-color: transparent" size="small" @click="item3Seem = !item3Seem;isDisplay=!isDisplay" :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import { selDictonary, selDictonaryValue } from '../../../api/dictionary'
  import { selBreth } from '../../../api/parkingResource/parkingSpace'
  import CollapseVertical from '../../../utils/collapseVertical'

  export default {
    name: 'parkingSpaceForm',
    props: ['park', 'road', 'ranNum', 'pageNum', 'pageSize'],
    components: { CollapseVertical },
    data() {
      return {
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        labelPosition: 'left',
        spaceForm: {
          parkName: '',
          parkNo: '',
          berthNo: '',
          roadname: '',
          roadno: '',
          roadNum: '',
          berthType: '',
          berthStatus: '',
          isDemo: ''
        },
        numType: [], // 泊位类型
        numStatus: [], // 泊位状态
        demoRoad: [] // 是否示范路
      }
    },
    mounted: function() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'placetype') {
            this.numType = content[i].comboboxDetailList
          } else if (content[i].id === 'enableflag') {
            this.numStatus = content[i].comboboxDetailList
          } else if (content[i].id === 'roadkind') {
            this.demoRoad = content[i].comboboxDetailList
          } else {
            continue
          }
        }
      })
    },
    watch: {
      park: function(val) {
        this.spaceForm.parkName = val.parkname
        this.spaceForm.parkNo = val.parkNo
      },
      road: function(val) {
        this.spaceForm.roadname = val.unitname
        this.spaceForm.roadNo = val.unitno
      },
      pageNum: function(val) {
        this.submitForm()
      },
      ranNum: function(val) {
        this.submitForm()
      },
      pageSize: function(val) {
        this.submitForm()
      }
    },
    methods: {
      submitForm: function() {
        this.$emit('tableLoad', true)
        selBreth(this.spaceForm, this.pageSize, this.pageNum).then(res => {
          selDictonaryValue(res).then(resp => {
            this.$emit('tableData', resp)
            this.$emit('tableLoad', false)
          })
        })
      },
      resetForm: function(spaceForm) {
        this.$refs[spaceForm].resetFields()
      },
      openPark: function() {
        this.$emit('parkBoolean', true)
      },
      openRoad: function() {
        this.$emit('roadBoolean', true)
      }
    }
  }
</script>

<style scoped>
  #slideRow{
    border: none;
  }
  .hidBtn{
    margin-left: 8px
  }
  .hidBtn .el-button{
    margin-top: 10px;
    width: 45px;
    height: 22px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #444444;
    padding: 3px 10.5px;
  }
  .el-main{
    padding: 0px;
    margin: 0;
  }
  .headSearch{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #7F8CA6;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-top: 22px;
  }
  .btnSearch1{
    width: 80px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 28px;
  }
  .rr{
    margin-left: 25px;
  }
  .el-footer {
    text-align: center;
    padding: 0;
    margin: 0;
    height: 0px;
  }
  .el-main{
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .el-form-item{
    height: 48px;
    margin-bottom: 8px;
  }
</style>
